$max-content-width: 780px;
$font-family-normal: sans-serif !important;
$font-family-labels: "Compacta Bold",Homenaje,Impact,sans-serif !important;
$font-color-normal: #000000 !important;

body {
  	font-family: $font-family-labels;
  	color: $font-color-normal;
}

.header, .footer {
  	border: 1px solid black;

	.content{
		width: 800px;
    	margin: 0 auto;
  	}
}

.skill-container, .stats-container, .stats-summary {
  	width: $max-content-width;
  	margin: 0 auto;
  	border: 1px solid black;
}

.header {
  	height: 200px;
}

.skill-container {
	height: 500px;

  	.skilltree-list{
    	margin-top:     15px;
    	margin-bottom:  15px;

    	.tree-wrapper {
      		width: $max-content-width / 3 ;
      		height: 400px;
     		background-color: green;
      		border: 1px solid black;
    	}
  	}
}

.stats-container {
  	min-height: 10px;
}

.stats-summary {
  	min-height: 10px;
  	font-family: arial;

  	span {
    	display: inline-block;
    	width: 100%;
    	padding-left: 5px;
  	}

  	.head {
    	background-color: lightblue;
    	border-radius:  5px;
    	margin-left: -20px;
  	}

	.head, .ehead, .shead {
	  	font-weight: bold;
	}

	.shead, .ehead {
		background-color: lightcoral;
		border-radius:  5px;
		margin-left: -20px;
		margin-top: 5px;
	}

	.ehead {
	  	background-color: lightgreen;
	}

	div {
		padding-left: 25px;
		border-left: 1px dashed rgba(0, 0, 0, .5);
	}
}

.footer {
  	height: 100px;
}
